import echarts from 'echarts'

// 柱状图,折线，曲线
export function createcategory (elementId, title, color, legend, xAxisData, axisLine, axisTick, yAxisName, ySplitLine, yAxisTick, yAxisLine, yAxisLabel, data, textColor, lineColor, boundaryGap, formatter,xAxisName) {
  var myChart = echarts.init(document.getElementById(elementId))
  var optionone = {
    title: title,
    tooltip: {
      trigger: 'axis',
      formatter: formatter
    },
    legend: legend,
    xAxis: {
      name:xAxisName,
      nameTextStyle: {
        color: textColor,
        // padding: [0, 0, 5, 20]
      },
      data: xAxisData,
      axisLine: {
        show: axisLine, // 隐藏X轴轴线
        lineStyle: {
          color: lineColor
        }
      },
      boundaryGap: boundaryGap,
      axisTick: {
        show: axisTick // 隐藏X轴刻度

      },
      axisLabel: {
        show: true,
        textStyle: {
          color: textColor // X轴文字颜色
        }
      }

    },
    grid: {
      top: '20%',
      bottom: '10%',
      left: '7%',
      right: '5%'
    },
    yAxis: {
      type: 'value',
      name: yAxisName,
      nameTextStyle: {
        color: textColor,
        padding: [0, 0, 5, 20]
      },
      splitLine: {
        show: ySplitLine,
        lineStyle: {
          color: lineColor
        }
      },
      axisTick: {
        show: yAxisTick,
        lineStyle: {
          color: lineColor
        }
      },
      axisLine: {
        show: yAxisLine,
        lineStyle: {
          color: lineColor
        }
      },
      axisLabel: {
        show: yAxisLabel,
        textStyle: {
          color: textColor
        }
      }

    },
    series: data
  }
  if (color != null) {
    optionone.color = color
  }
  myChart.setOption(optionone)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
// 环形图
export function circularGraph (elementId, color) {
  // alert(1)
  var myChart = echarts.init(document.getElementById(elementId))
  var scaleData = [{
    'name': '工程建设',
    'value': 50
  }
  ]
  var rich = {
    white: {
      color: color,
      align: 'center',
      padding: [5, 0]
    }
  }
  var placeHolderStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: '#e4e4e4',
      borderColor: '#e4e4e4',
      borderWidth: 10
    }
  }
  var data = []
  for (var i = 0; i < scaleData.length; i++) {
    data.push({
      value: 100 - scaleData[i].value,
      name: '',
      itemStyle: placeHolderStyle
    }, {
      value: scaleData[i].value,
      name: scaleData[i].name,
      itemStyle: {
        normal: {
          borderWidth: 10,
          // shadowBlur: 10,
          borderColor: new echarts.graphic.LinearGradient(1, 1, 0.5, 1, [{
            offset: 0,
            color: color
          }, {
            offset: 1,
            color: color
          }]),
          shadowColor: 'rgba(142, 152, 241, 0.6)'
        }
      }
    })
  }
  var seriesObj = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [50, 55],
    startAngle: 225,
    endAngle: 45,
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: true,
          position: 'center',
          color: color,
          fontSize: '30',
          formatter: function (params) {
            var percent = 0
            var total = 0
            for (var i = 0; i < scaleData.length; i++) {
              total += scaleData[i].value
            }
            percent = ((params.value / 100) * 100).toFixed(0)
            if (params.name !== '') {
              return percent + '%'
            } else {
              return total
            }
          },
          rich: rich
        },
        labelLine: {
          show: false
        }
      }
    },
    data: data
  }]
  var option = {
    backgroundColor: 'transparent',
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      show: false
    },
    toolbox: {
      show: false
    },
    series: seriesObj
  }

  myChart.setOption(option)
  // myChart.resize()
  window.addEventListener('resize', function () {
    setTimeout(function () {
      myChart.resize()
    }, 500)
  })
}
//
function array2obj (array, key) {
  var resObj = {}
  for (var i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}
export function circularGraph02 (elementId, scaleData, color, center, radius, label, legendData) {
  var myChart = echarts.init(document.getElementById(elementId))
  var objData = array2obj(scaleData, 'name')
  // console.log(objData)
  var seriesObj = [{
    name: '',
    type: 'pie',
    clockWise: false,
    center: center,
    radius: radius,
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: label,
          position: 'center',
          color: '#add8ff',
          fontSize: '16',
          fontWeight: 100,
          formatter: function (params) {
            var total = 0
            for (var i = 0; i < scaleData.length; i++) {
              total += scaleData[i].value
            }
            if (params.name !== '') {
              return '总数\n\n' + total
            } else {
              return ''
            }
          }
        },
        labelLine: {
          show: false
        }
      }
    },
    data: scaleData
  }]
  var option = {
    backgroundColor: 'transparent',
    color: color,
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b}: <br>{c} ({d}%)'
    },
    legend: legendData,
    toolbox: {
      show: false
    },
    series: seriesObj
  }
  if (option.legend.formatter !== null) {
    option.legend.formatter = function (name) {
      return ' ' + name + '  ' + (objData[name].value)
    }
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    setTimeout(function () {
      myChart.resize()
    }, 500)
  })
}
// 柱状图,折线，曲线(双y轴)
export function dobulYcategory (elementId, title, color, legend, xAxisData, data, textColor, lineColor, formatter, axisLabelFormatter, yAxis1, yAxisName0, yAxisName1, gridCont,xAxisName,boundaryGap, yMin0,yMin1,mun,initNum,) {
  let gridConFig = {
    y2: '10%', // bottom
    y: '25%', // top
    x: '10%', // left
    x2: '10%' // right
  }
  // alert(boundaryGap)
  let boundaryGaps=false
  var myChart = echarts.init(document.getElementById(elementId))
  var optionone = {
    title: title,
    tooltip: {
      trigger: 'axis',
      formatter: formatter
    },
    legend: legend,
    xAxis: {
      type: 'category',
      boundaryGap: boundaryGap==undefined?true:boundaryGap,
      name: xAxisName,
      nameTextStyle: {
          color: textColor
        },
      splitLine: {
        show: false
      },
      data: xAxisData,
      axisLabel: {
        show: true,
        interval: 0,
        textStyle: {
          color: textColor
        }
      },
      axisLine: {
        lineStyle: {
          color: lineColor
        }
      },
      axisTick: {
        show: false,
        alignWithLabel: null
      }
    },

    grid: gridCont === undefined ? gridConFig : gridCont,
    yAxis: [
      {
        min: yMin0,
        type: 'value',
        name: yAxisName0,
        nameGap: 20,
        minInterval: !!initNum ? initNum : 1,
        nameTextStyle: {
          color: textColor
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: lineColor
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: lineColor
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: lineColor
          }
        },
        axisLabel: {
          show: true,
          formatter(value,index) {
            return value.toFixed(mun)
          },
          textStyle: {
            color: textColor
          }
        }

      },
      {
        min: yMin1,
        type: 'value',
        name: yAxisName1,
        // minInterval: !!initNum ? initNum : 1,
        
        nameTextStyle: {
          color: textColor
        },
        show: yAxis1,
        // max: '100',
        splitLine: {
          show: false,
          lineStyle: {
            color: lineColor
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: lineColor
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: lineColor
          }
        },
        axisLabel: {
          show: true,
          // formatter: axisLabelFormatter,
          textStyle: {
            color: textColor
          }
        }

      }
    ],
    series: data
  }
  if (legend != null) {
    if(!legend.textStyle){
      legend.textStyle = {
        color: '#add8ff'
      }
    }
    
  }
  if (color != null) {
    optionone.color = color
  }
  myChart.setOption(optionone)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
// 大数据量折线图
export function largeData (elementId, datas, color, legend, yAxisName, text, smooth) {
  var myChart = echarts.init(document.getElementById(elementId))
  var seriesData = []
  for (var i = 0; i < legend.data.length; i++) {
    seriesData.push({
      name: legend.data[i],
      type: 'line',
      smooth: smooth,
      symbol: 'none',
      sampling: 'average',
      // itemStyle: {
      //     color: 'rgb(255, 70, 131)'
      // },

      data: datas.data[i]
    })
  }

  // console.log(seriesData)
  var option = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%']
      }
    },

    title: {
      left: 'center',
      top: '5%',
      text: text,
      textStyle: {
        color: '#1580E8',
        fontSize: 16
      }
    },
    legend: legend,
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: datas.date,
      axisLine: {
        lineStyle: {
          color: '#6076ad'
        }
      }
    },
    grid: {
      x: '3%',
      x2: '5%',
      y: '18%',
      y2: '15%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      name: yAxisName,
      splitLine: {
        show: false
      },
      nameTextStyle: {
        color: '#6c8dae'
      },
      axisLine: {
        lineStyle: {
          color: '#6076ad'
        }
      },
      boundaryGap: [0, '100%']
    },
    dataZoom: [{
      type: 'inside',
      start: 0,
      end: 100,
      bottom: '6%'
    }, {
      start: 0,
      end: 100,
      show: true,
      fillerColor: '#0083FF',
      borderColor: 'transparent',
      height: 8,
      backgroundColor: '#FFFFFF',
      dataBackground: {
        areaStyle: {
          color: 'transparent'
        },
        lineStyle: {
          color: 'transparent'
        }
      },

      handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      handleSize: '80%',
      handleStyle: {
        color: '#6c8dae',
        shadowBlur: 3,
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
      },
      textStyle: {
        color: '#6076ad'
      },
      bottom: '6%'
    }],
    series: seriesData
  }
  option.legend.textStyle = {
    color: '#ffffff'
  }
  if (color != null) {
    option.color = color
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
// 玫瑰图
export function polarCoordinates (elementId, data, color, legend, yAxisName) {
  var seriesData = []
  for (var i = 0; i < legend.data.length; i++) {
    seriesData.push({
      type: 'bar',
      data: data.data[i],
      coordinateSystem: 'polar',
      name: legend.data[i],
      stack: '总量'
    })
  }
  var myChart = echarts.init(document.getElementById(elementId))
  var option = {
    angleAxis: {
      type: 'category',
      startAngle: 90,
      boundaryGap: false,
      data: ['0℃', '45℃', '90℃', '135℃', '180℃', '225℃', '275℃', '315℃'],
      z: 10,
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisPointer: {
        show: true
      }
    },
    tooltip: {
      trigger: 'axis'

    },
    // color:color,
    radiusAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    polar: {
      tooltip: {
        textStyle: {
          color: '#fff'
        }
      }
    },
    series: seriesData,
    legend: legend

  }
  option.legend.textStyle = {
    color: '#ffffff'
  }
  option.legend.itemWidth = 8
  option.legend.itemHeight = 8
  option.legend.itemGap = 15
  // itemWidth: 20,
  // itemHeight: 5
  if (color != null) {
    option.color = color
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
// 大数据量折线图
export function alarmLine (elementId, datas, color, legend, yAxisName, text) {
  // console.log(",--------------------,",datas)
  var myChart = echarts.init(document.getElementById(elementId))

  var option = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%']
      }
    },

    title: {
      left: 'center',
      top: '5%',
      text: text,
      textStyle: {
        color: '#1580E8',
        fontSize: 16
      }
    },
    legend: legend,
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: datas.date,
      axisLine: {
        lineStyle: {
          color: '#6076ad'
        }
      }
    },
    grid: {
      x: '3%',
      x2: '5%',
      y: '18%',
      y2: '15%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      name: yAxisName,
      splitLine: {
        show: false
      },
      nameTextStyle: {
        color: '#6c8dae'
      },
      axisLine: {
        lineStyle: {
          color: '#6076ad'
        }
      },
      boundaryGap: [0, '100%']
    },
    dataZoom: [{
      type: 'inside',
      start: 0,
      end: 100,
      bottom: '6%'
    }, {
      start: 0,
      end: 100,
      show: false,
      fillerColor: '#0083FF',
      borderColor: 'transparent',
      height: 8,
      backgroundColor: '#FFFFFF',
      handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      handleSize: '80%',
      handleStyle: {
        color: '#6c8dae',
        shadowBlur: 3,
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
      },
      textStyle: {
        color: '#6076ad'
      },
      bottom: '6%'
    }],
    series: [
      {
        name: legend.data[0],
        type: 'bar',
        barWidth: '15%',
        smooth: true,
        symbol: 'none',
        sampling: 'average',

        data: datas.data[0]
      },
      {
        name: legend.data[1],
        type: 'bar',
        barWidth: '15%',
        smooth: true,
        symbol: 'none',
        sampling: 'average',

        data: datas.data[1]
      },
      {
        name: legend.data[2],
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        markLine: {
          silent: false,
          lineStyle: {
            color: '#FF6D5D'
          },
          data: [{
            yAxis: 75
          }]
        },
        data: datas.data[3]
      }
    ]
  }
  option.legend.textStyle = {
    color: '#ffffff'
  }
  if (color != null) {
    option.color = color
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
export function roseFunction (elementId, datas, textArr, color, text, radius, center, legend) {
  if (Object.prototype.toString.call(elementId) === '[object Object]') {
    datas = elementId.itemValue
    textArr = elementId.textList
    color = elementId.itemColor
    text = elementId.title
    radius = elementId.ringRadius
    center = elementId.position
    legend = elementId.legend
    elementId = elementId.id
  }

  var series = []

  datas.xData.map((item, i) => {
    series.push(
      {
        value: item,
        name: textArr[i]
      }
    )
  })
  var myChart = echarts.init(document.getElementById(elementId))
  var option = {
    color: color,
    title: {
      x: 'left'
    },
    tooltip: {
      trigger: 'item',
      show: false,
      formatter: '{a} <br/>{b}: {c} ()'
    },
    toolbox: {
      show: false
    },

    legend: legend,
    calculable: true,
    series: [
      {
        name: text,
        type: 'pie',
        radius: radius,
        center: center,
        roseType: 'area',
        itemStyle: {
          // 阴影的大小
          shadowBlur: 10,
          // 阴影水平方向上的偏移
          shadowOffsetX: 0,
          // 阴影垂直方向上的偏移
          shadowOffsetY: 0,
          // 阴影颜色
          shadowColor: 'rgba(0,0,0,0.6)'
        },
        label: {
          normal: {
            formatter: '{d}%',
            position: 'inside'
          }
        },
        data: series
      }
    ]
  }

  if (option.legend !== null) {
    var objData = array2obj(series, 'name')
    // console.log('objData__',objData)
    option.legend.formatter = function (name) {
      return ' ' + name + '  ' + (objData[name].value)
    }
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
// 仪表盘
export function gauge (elementId, demoData) {
  // alert(1)
  var myChart = echarts.init(document.getElementById(elementId))
  var highlight = '#03b7c9'

  // var demoData = [
  //   { name: '同比', value: 32.45, unit: '%', pos: ['25%', '45%'], range: [0, 100], colora: '#fcc081', colorb: '#fe6790', up: 1 },
  //   { name: '环比', value: 15.36, unit: '%', pos: ['75%', '45%'], range: [0, 100], colora: '#f1aa2e', colorb: '#fbbc52', up: -1 }

  // ]

  var option = {
    // backgroundColor: '',
    series: (function () {
      var result = []

      demoData.forEach(function (item) {
        result.push(

          // 内侧指针、数值显示
          {
            name: item.name,
            type: 'gauge',
            center: item.pos,
            radius: '75%',
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 100,
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                color: [
                  [
                    item.value / 100, new echarts.graphic.LinearGradient(
                      0, 0, 1, 0, [{
                        offset: 0,
                        color: item.colora
                      },
                      {
                        offset: 1,
                        color: item.colorb
                      }
                      ]
                    )
                  ],
                  [
                    1, '#195287'
                  ]
                ]
              }
            },
            axisTick: {
              show: 0
            },
            splitLine: {
              show: 0
            },
            axisLabel: {
              show: 0
            },
            pointer: {
              show: false,
              length: '105%'
            },
            detail: {
              show: true,
              offsetCenter: [0, '15%'],
              textStyle: {
                fontSize: 25,
                color: '#acd8ff'
              },
              formatter: function () {
                if (item.up > 0) {
                  return [
                    item.value + (item.unit || ' ') + '{a| ↑}',
                    '{name|' + item.name + '}'
                  ].join('\n')
                } else {
                  return [
                    item.value + (item.unit || ' ') + '{b| ↓}',
                    '{name|' + item.name + '}'
                  ].join('\n')
                }
              },
              rich: {
                name: {
                  fontSize: 16,
                  lineHeight: 30,
                  color: '#acd8ff'
                },
                a: {
                  fontSize: 23,
                  fontWeight: 'bolder',
                  lineHeight: 20,
                  color: '#51ae39'
                },
                b: {
                  fontSize: 23,
                  fontWeight: 'bolder',
                  lineHeight: 20,
                  color: '#fca91b'
                }

              }
            },
            itemStyle: {
              normal: {
                color: highlight
              }
            },
            data: [{
              value: item.value
            }]
          }
        )
      })

      return result
    })()
  }

  myChart.setOption(option)
  // myChart.resize()
  window.addEventListener('resize', function () {
    setTimeout(function () {
      myChart.resize()
    }, 500)
  })
}

export function circularGraph03 (elementId,scaleData) {
  // alert(1)
  var myChart = echarts.init(document.getElementById(elementId))
  var objData = array2obj(scaleData, 'name')
  // console.log(objData,'objData')

  var seriesObj = [{
    name: '',
    type: 'pie',
    clockWise: false,
    center: ['20%', '45%'],
    radius: [35, 45],
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: false,
          position: 'center',
          color: '#e4e4e4',
          fontSize: '30',
          formatter: function (params) {
            var percent = 0
            var total = 0
            for (var i = 0; i < scaleData.length; i++) {
              total += scaleData[i].value
            }
            percent = ((params.value / 100) * 100).toFixed(0)
            if (params.name !== '') {
              return percent + '%'
            } else {
              return ''
            }
          }
          // rich: rich
        },
        labelLine: {
          show: false
        }
      }
    },
    data: scaleData
  }]
  var option = {
    backgroundColor: 'transparent',
    color: ['#42c2ff','#5d8aff','#a380f8',"#f39c11","#72c359","#feb089",'#eb7a6c','#46a2f7'],
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      show: true,
      orient: 'vertical',
      icon:'circle',
      left: '38%',
      top: '3%',
      itemGap: 5,
      itemWidth: 5,
      itemHeight: 5,
      textStyle:{
        rich:{
          a: {
            color: 'red',
            lineHeight: 10
        },
        }
      },
      formatter:function (name) {
        return ' ' + name + '  ' + (objData[name].value)
      }
    },
    toolbox: {
      show: false
    },
    series: seriesObj
  }

  myChart.setOption(option)
  // myChart.resize()
  window.addEventListener('resize', function () {
    setTimeout(function () {
      myChart.resize()
    }, 500)
  })
}
// 饼图
export function createClickPie(elementId, title, legend, radius, center, data, color, fn, formatter, label, labelLine, backgroundColor) {
    var myChart = echarts.init(document.getElementById(elementId));
    var option = {
        title: title,
        color: color,
        tooltip: {
            trigger: 'item',
            formatter: formatter
        },
        backgroundColor: backgroundColor,
        legend: legend,
        series: [{
            type: 'pie',
            radius: radius,
            center: center,
            data: data,
            itemStyle: {
                emphasis: {
                    // shadowBlur: 10,
                    // shadowOffsetX: 0,
                    // shadowColor: 'rgba(0, 0, 0, 0)'
                },
                normal: {
                    label: label,
                    borderColor: '#036494',
                    borderWidth: 0,
                    shadowColor: 'rgba(128, 217, 248, .3)',
                    shadowOffsetX: -1,
                    shadowOffsetY: 1,
                    shadowBlur: 5,
                    labelLine: labelLine
                }
            }
        }]
    };
    myChart.setOption(option);
    if (color != null) {
        option.color = color;
    }
    // if(formatter==null){
    //   option.tooltip.formatter="{b} :{d}%"
    // }
    if (fn != null) {
        myChart.on('click', fn)
    }
    window.addEventListener('resize', function() { myChart.resize() })

};
